<template>
  <div>
    <h3>父页面</h3>

    <div>
      <h5>业务背景：</h5>
      <div class="background-desc">
        存在不同的 tab， 有的 tab 需要校验必填项， 有的可以不强制校验， 例如：
        配置管理
      </div>
      <div class="background-desc">
        需要在提交动作， 对强校验的数据进行收集，并发送接口请求
      </div>
    </div>
    <el-tabs
      class="tab-container"
      v-model="activeName"
      @tab-click="handleClick"
    >
      <el-tab-pane name="first">
        <span slot="label" class="tab-label">
          我的行程
          <div class="require-supplement" v-if="!moduleList[0].success">
            待填写
          </div>
        </span>
        <com-1 :ref="moduleList[0].tabName"></com-1>
      </el-tab-pane>
      <el-tab-pane name="second">
        <span slot="label" class="tab-label"> 配置管理 </span>
        <com-2 :ref="moduleList[1].tabName"></com-2>
      </el-tab-pane>
      <el-tab-pane name="third">
        <span slot="label" class="tab-label">
          角色管理
          <div class="require-supplement" v-if="!moduleList[2].success">
            待填写
          </div>
        </span>
        <com-3 :ref="moduleList[2].tabName"></com-3>
      </el-tab-pane>
    </el-tabs>

    <div>
      <el-button class="opt-btn" type="primary" @click="submit">提交</el-button>
    </div>
    <div style="margin-top: 20px">
      <json-view
        v-show="isShowJSON"
        :data="jsonData"
        v-bind="getConfig"
      ></json-view>
    </div>
  </div>
</template>

<script>
import com1 from './com-1.vue'
import com2 from './com-2.vue'
import com3 from './com-3.vue'

export default {
  name: 'tabs',
  components: {
    com1,
    com2,
    com3
  },
  data () {
    return {
      jsonData: {},
      activeName: 'first',
      moduleList: [
        {
          tabName: 'first',
          success: false,
          isRequire: true,
          moduleNameText: '我的行程'
        },
        {
          tabName: 'second',
          success: false,
          isRequire: false,
          moduleNameText: '配置管理'
        },
        {
          tabName: 'third',
          success: false,
          isRequire: true,
          moduleNameText: '角色管理'
        }
      ]
    }
  },
  computed: {
    isShowJSON () {
      return !this.jsonData || Object.keys(this.jsonData).length !== 0
    },
    getConfig () {
      return {
        theme: 'vs-code',
        deep: 5
      }
    }
  },
  methods: {
    handleClick () {
      this.checkAllTabs()
    },
    /**
     * 遍历所有的校验方法
     */
    checkAllTabs () {
      this.moduleList.forEach(item => {
        if (item.isRequire) {
          item.success = this.$refs[item.tabName].checkForm()
        }
      })
    },
    submit () {
      let allData = {}
      const msgModuleList = []

      this.moduleList.forEach(item => {
        let valid = true
        valid = this.$refs[item.tabName].checkForm()

        const currentFormModel = this.$refs[item.tabName].getFormModel()
        if (currentFormModel) {
          Object.assign(allData, currentFormModel)
        }
        item.success = valid

        valid ? '' : msgModuleList.push(item.moduleNameText)
      })


      if (msgModuleList.length) {
        this.$alert(msgModuleList.join('<br/>'), '以下内容未填写，不可暂存或者提交', {
          confirmButtonText: '确定',
          dangerouslyUseHTMLString: true
        })

        this.jsonData = {}
        return
      }

      // 拿到所有组件的数据
      this.jsonData = allData
    }
  }
}
</script>

<style lang="less" scoped>
.background-desc {
  padding: 6px;
}
.tab-container {
  position: relative;
  min-height: 200px;
  background: #ddd;
  color: #fff;
}
.tab-label {
  position: relative;

  .require-supplement {
    position: absolute;
    left: 100%;
    top: -16px;

    background-color: red;
    color: #fff;
    text-align: center;
    height: 20px;
    line-height: 20px;
    width: 50px;
    border-radius: 10px;
    bottom: 65%;
    font-size: 12px;
  }
}

.opt-btn {
  margin-top: 30px;
}
</style>
<style lang="less" >
.el-tabs__item {
  padding: 0 37px;
  height: 50px;
  line-height: 50px;
}
</style>
